<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <!-- 这里必须加一个div -->
    <div>
      <svg-icon style="color:#fff;font-size:20px" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="'zh'=== $i18n.locale ">中文</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="'en'=== $i18n.locale ">en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods: {
    changeLanguage(newLang) {
      // 这个函数会在下拉菜单被点击触发
      // console.log(newLang)
      // 在语言插件安装之后 会在this添加$t 作为翻译函数
      // 还会有一个$i18n的实例对象
      // console.log(this.$i18n);
      // 切换$i18n语言设定
      this.$i18n.locale = newLang
      //  提示用户
      this.$message.success(this.$t('translate'))
      // 保存本地 防止刷新重置翻译
      localStorage.setItem('Lang', newLang)
    }
  }
}
</script>

<style>

</style>
